<template>
	<view>
		<view class="td-head">
			<view style="font-size: 42rpx; margin-bottom: 34rpx;">
				<text v-if="dto.status==1">未使用> </text>
				<text v-else>已完成> </text>
			</view>
			<view>
				<text>订单号：{{orderId}}</text>
			</view>
			<view style="margin-left: 0rpx;">
				<view v-if="dto.status==1" style="margin-left: 0rpx;" @click="toUse()" >
					<view style="background-color: #fff; width: 250rpx; height: 70rpx; border-radius:30rpx; color: #000; line-height: 70rpx; text-align: center;">
						<text>去使用</text>
					</view>
				</view>
				<view v-else @click="toBuy()">
					<view style="background-color: #fff; width: 250rpx; height: 70rpx; border-radius:30rpx; color: #000; line-height: 70rpx; text-align: center;">
						<text>再次预订</text>
					</view>
				</view>
			</view>
			
		</view>
		<view class="td-main">
			<view class="td-main-item1">
				<view>预订人：<text>{{dto.orderDetail[0].bookName}}</text> </view>
				<view>订单时间：<text>{{dto.createTime}}</text> </view>
				<view>游玩景区：<text>{{dto.scName}}</text> </view>
				<view>数量：<text>{{dto.num}}</text> </view>
				<view>总价：<text>￥{{dto.sumPrice}}</text> </view>
				<view style="height: 10rpx;"> </view>
			</view>
			
			
			
				<view v-for="(item,index) in dto.orderDetail" :key="index" class="item2">
					<view style="height: 10rpx;"> </view>
					<view>
						<text>{{dto.scName+item.typeName}}</text>
					</view>
					<view>
						<text style="width: 120rpx; font-size: 26rpx; color: gray;">游玩人：</text>
						<text style="margin-left: 20rpx; font-size: 26rpx; color:#00ae40;">{{item.palyerName}}</text>
					</view>
					<view>
						<text style="width: 120rpx; font-size: 26rpx; color: gray;">游玩日期：</text>
						<text style="margin-left: 20rpx; font-size: 26rpx; color:#00ae40;">{{tkdate}}</text>
					</view>
					<view v-if="dto.status==1">
						<text style="width: 120rpx; font-size: 26rpx; color: gray;">游玩须知：</text>
						<text style="margin-left: 20rpx; font-size: 26rpx; color:#00ae40;">使用身份证进入景区，注意事项，阿巴阿巴阿巴，阿巴阿巴阿巴</text>
						
						
					</view>
					
					
				</view>
			</view>
			
		
		
	</view>
</template>

<script>
	

import QRCode from 'qrcodejs2'
	export default {
		data() {
			return {
				orderId:null,
				canvasId:3455,
				tkdate:'2023-11-04',
				dto: {
				  orderId: 1,
				  ticketId:1,
				  scId: 1,
				  scName: '张家界森林公园',
				  sumPrice: 1000,
				  num: 5,
				  userId: 1,
				  status: 1,
				  createTime: '2021-11-2 10:00:11',
				  orderDetail: [{
					orderDetailId: 1,
					createTime: '2021-11-2 10:00:11',
					bookName: '张三',
					palyerName: '李四',
					typeName: '成人票',
					price: 240,
				  },
				  {
				  					orderDetailId: 1,
				  					createTime: '2021-11-2 10:00:11',
				  					bookName: '张三',
				  					palyerName: '李四',
				  					typeName: '成人票',
				  					price: 240,
				  }],
				}
			}
		},
		mounted() {
			
			
		},
		onLoad(options){
			console.log(options.orderId)
			this.orderId = options.orderId
			
			this.init()
		},
		methods: {
			toBuy(){
				uni.navigateTo({
					url:"/pages/ticket/ticket?scid="+this.dto.scId
				})
			},
			toUse(){
				this.request({
					url:'/ticket-order/update-tatus',
					method:'GET',
					data:{
						orderId:this.orderId,
						status:3
					}
				}).then(res=>{
					if(res.code=='1'){
						this.init()
					}
				})
			},
			init(){
				this.request({
					url:'/ticket-order/detail',
					method:'GET',
					data:{
						orderId:this.orderId
					}
					
				}).then(res=>{
					if(res.code=='1'){
						this.dto = res.data
					}
				})
				
				
				this.request({
					url:'/ticket/getTkdate',
					method:'GET',
					data:{
						ticketId:this.dto.ticketId
					}
					
				}).then(res=>{
					if(res.code=='1'){
						this.tkdate = res.data
					}
				})
			}
		}
	}
</script>

<style scoped>
.td-head {
	width: 100vw;
	max-width: 100vw;
	height: 20vh;
	background-color: #00ae40;
	color: #fff;
}
.td-head view {
	margin-left: 24rpx;
	margin-bottom: 20rpx;
}
.td-main {
	background-color: #f1f1f1f1;
}
.td-main-item1 {
	background-color: #fff;
	
	width: 100vw;
	
	
	margin-bottom: 24rpx;
}
.td-main-item1 view {
	margin-left: 24rpx;
	margin-bottom: 20rpx;
	margin-top: 14rpx;
	color: gray;
	font-size: 26rpx;
	
}
.td-main-item1 view text {
	color: #00ae40;
	
}

.item2 {
	 background-color: #fff;
	 width: 100vw;
	 margin-top: 24rpx;
	
 }
 .item2 view {
	 margin-left: 24rpx;
	 margin-top: 24rpx;
 }
</style>
